<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 事件代理(事件委托)：用到的原理就是事件冒泡，把事件处理添加到父元素，等待子元素事件冒泡，并且父元素可以通过target判断是哪个子元素，从而做出相应的处理
        window.onload=function(){

            //方式一：
            // var lis=document.getElementsByTagName("li");
            // for(var i=0;i<lis.length;i++){
            //     lis[i].onclick=function(){
            //         console.log(this.innerHTML);
            //     };
            // }

            
            //方式二：
            var myul=document.getElementById("myul");
            myul.onclick=function(e){//事件对象
                var target=e.target;//DOM对象
                // console.log(target.nodeName);//节点名称
                if(target.nodeName=="LI"){
                    console.log(target.innerHTML);
                }
            };



        };

        function doAdd(){
            var li=document.createElement("li");//创建li元素
            li.innerHTML="我是li";//添加文本
            var myul=document.getElementById("myul");//获取父元素
            myul.appendChild(li);//将li添加到ul中去
            
        }
    </script>
</head>
<body>
    <ul id="myul">
        <li>red</li>
        <li>green</li>
        <li>blue</li>
        <li>yellow</li>
        <li>pink</li>
    </ul>
    <input type="button" value="按钮" onclick="doAdd()">
</body>
</html>